<script lang="ts" setup>
import type { AssetInventoryDetailResponse } from '#/api/kingtown/types';

import { h, reactive, ref } from 'vue';

import {
  BarsOutlined,
  EditOutlined,
  PullRequestOutlined,
  SaveOutlined,
  StopOutlined,
} from '@ant-design/icons-vue';

import AssetInventoryDetail from '#/views/asset/component/AssetInventoryDetail.vue';

const editableData: Record<string, any> = reactive({});

const dataSource = ref<AssetInventoryDetailResponse[]>([
  {
    assetId: '123456',
    assetCode: 'CN-12345678',
    currentName: '当前资产名称',
    epc: '',
    currentFloor: '48F',
    currentAddress: '12F.506',
    image: '',
    currentColor: '白色 White',
    currentSize: '3000mm * 1500mm * 5000mm',
    currentBrand: '这里是资产品牌',
    tagStatus: '标签卷边',
    inventoryStatus: '1',
    syncStatus: '0',
    inventoryBy: '18768172795',
    inventoryTime: '2025-08-18 09:55:10',
    syncTime: '',
    changeField: 'brand',
    remark: '',
  },
  {
    assetId: '123458',
    assetCode: 'CN-12345678',
    currentName: '当前资产名称',
    epc: '',
    currentFloor: '48F',
    currentAddress: '12F.506',
    image: '',
    currentColor: '白色 White',
    currentSize: '3000mm * 1500mm * 5000mm',
    currentBrand: '这里是资产品牌',
    tagStatus: '标签卷边',
    inventoryStatus: '1',
    syncStatus: '0',
    inventoryBy: '18768172795',
    inventoryTime: '2025-08-18 09:55:10',
    syncTime: '',
    changeField: '',
    remark: '',
  },
]);
const columns = ref([
  {
    title: '资产编号',
    dataIndex: 'assetCode',
    key: 'assetCode',
    width: 100,
    align: 'center',
    fixed: 'left',
  },
  {
    title: '资产名称',
    dataIndex: 'currentName',
    key: 'currentName',
    width: 140,
    align: 'center',
  },
  {
    title: '所在楼层',
    dataIndex: 'currentFloor',
    key: 'currentFloor',
    width: 80,
    align: 'center',
  },
  {
    title: '所在位置',
    dataIndex: 'currentAddress',
    key: 'currentAddress',
    width: 80,
    align: 'center',
  },
  {
    title: '标签状态',
    dataIndex: 'tagStatus',
    key: 'tagStatus',
    width: 80,
    align: 'center',
  },

  {
    title: '盘点状态',
    dataIndex: 'inventoryStatus',
    key: 'inventoryStatus',
    width: 80,
    align: 'center',
  },
  {
    title: '同步状态',
    dataIndex: 'syncStatus',
    key: 'syncStatus',
    width: 80,
    align: 'center',
  },
  {
    title: '盘点人',
    dataIndex: 'inventoryBy',
    key: 'inventoryBy',
    width: 80,
    align: 'center',
  },
  {
    title: '盘点时间',
    dataIndex: 'inventoryTime',
    key: 'inventoryTime',
    width: 110,
    align: 'center',
  },
  {
    title: '盘点备注',
    dataIndex: 'remark',
    key: 'remark',
    width: 80,
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 140,
    align: 'center',
    fixed: 'right',
  },
]);

const params = ref({
  assetCode: '',
  assetName: '',
  assetFloor: '',
  assetAddress: '',
  tagStatus: '',
  inventoryStatus: '',
  hasChange: '',
  syncStatus: '',
});
const openDetail = ref<Boolean>(false);
const refreshKey = ref<string>();
const targetAsset = ref<AssetInventoryDetailResponse>({});
const handleEdit = (record: any) => {
  dataSource.value.forEach((item) => {
    console.info('看看item, item id, key', item, item.assetId, record.assetId);
    if (record.assetId === item.assetId) {
      editableData[record.assetId] = deepClone(item);
    }
  });
};
const handleSave = (key: string) => {
  Object.assign(
    dataSource.value.find((item) => key === item.assetId),
    editableData[key],
  );
  // editAssetApi(editableData[key]).then((res) => {
  //   console.log('edit result', res);
  //   message.success('修改成功');
  // });
  delete editableData[key];
};
const handleCancel = (key: string) => {
  delete editableData[key];
};
const deepClone = (original: any) => {
  return JSON.parse(JSON.stringify(original));
};
const handleDetail = (record: AssetInventoryDetailResponse) => {
  console.info(record);
  targetAsset.value = record;
  openDetail.value = true;
};
const handleSync = (record: AssetInventoryDetailResponse) => {
  console.info(record);
};
const closeLifecycle = () => {
  openDetail.value = false;
};
</script>
<template>
  <div class="page-wrap">
    <div class="statistic-wrap">
      <div class="statistic-item statistic-item-total">
        <div class="statistic-item-label">应盘数量</div>
        <div class="statistic-item-number">3894</div>
      </div>
      <div class="statistic-item statistic-item-counted">
        <div class="statistic-item-label">已盘数量</div>
        <div class="statistic-item-number">3894</div>
      </div>
      <div class="statistic-item statistic-item-uncounted">
        <div class="statistic-item-label">未盘数量</div>
        <div class="statistic-item-number">3894</div>
      </div>
      <div class="statistic-item statistic-item-added">
        <div class="statistic-item-label">新增数量</div>
        <div class="statistic-item-number">3894</div>
      </div>
    </div>
    <div class="action-wrap">
      <div style="display: flex; flex-direction: column">
        <div>
          <span>当前任务名称：</span>
          <a-select v-model:value="params.inventoryStatus" style="width: 200px">
            <a-select-option value="全部">全部</a-select-option>
            <a-select-option value="已盘">已盘</a-select-option>
            <a-select-option value="未盘">未盘</a-select-option>
          </a-select>
        </div>
        <a-space style="margin-top: 8px">
          <a-button type="primary">完成</a-button>
          <a-button type="primary">同步</a-button>
          <a-button type="default">导出</a-button>
        </a-space>
      </div>

      <div class="search-wrap">
        <div style="flex: 1; display: flex; flex-direction: column">
          <a-space>
            <span>资产名称</span>
            <a-input style="width: 120px" v-model:value="params.assetCode" />
            <span>资产编码</span>
            <a-input style="width: 120px" v-model:value="params.assetName" />
            <span>所在楼层</span>
            <a-input style="width: 120px" v-model:value="params.assetFloor" />
            <span>所在位置</span>
            <a-input style="width: 120px" v-model:value="params.assetAddress" />
            <a-button type="primary">搜索</a-button>
          </a-space>

          <a-space style="margin-top: 8px">
            <span>标签状态</span>
            <a-select v-model:value="params.tagStatus" style="width: 120px">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="正常">无异常</a-select-option>
              <a-select-option value="标签卷边">标签卷边</a-select-option>
              <a-select-option value="无标签">无标签</a-select-option>
            </a-select>
            <span>盘点状态</span>
            <a-select
              v-model:value="params.inventoryStatus"
              style="width: 120px"
            >
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="0">未盘</a-select-option>
              <a-select-option value="1">新增</a-select-option>
              <a-select-option value="2">已盘</a-select-option>
              <a-select-option value="3">重复已盘</a-select-option>
            </a-select>
            <span>信息修改</span>
            <a-select v-model:value="params.hasChange" style="width: 120px">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">是</a-select-option>
              <a-select-option value="0">否</a-select-option>
            </a-select>
            <span>同步状态</span>
            <a-select v-model:value="params.syncStatus" style="width: 120px">
              <a-select-option value="">全部</a-select-option>
              <a-select-option value="1">已同步</a-select-option>
              <a-select-option value="0">未同步</a-select-option>
            </a-select>
          </a-space>
        </div>
        <a-space />
      </div>
    </div>
    <div class="content-wrap">
      <a-table
        :data-source="dataSource"
        :columns="columns"
        :scroll="{ x: 1750 }"
      >
        <template #bodyCell="{ column, text, record }">
          <template
            v-if="
              [
                'currentName',
                'currentFloor',
                'currentAddress',
                'currentColor',
                'currentSize',
                'currentBrand',
                'remark',
              ].includes(column?.dataIndex)
            "
          >
            <div>
              <a-input
                v-if="editableData[record.assetId]"
                v-model:value="editableData[record.assetId][column?.dataIndex]"
                style="margin: -5px 0"
              />
              <template v-else>
                {{ text }}
              </template>
            </div>
          </template>
          <template v-if="['tagStatus'].includes(column?.dataIndex)">
            <div>
              <a-select
                v-if="editableData[record.assetId]"
                v-model:value="editableData[record.assetId][column?.dataIndex]"
                style="margin: -5px 0; width: 100px"
              >
                <a-select-option value="正常">正常</a-select-option>
                <a-select-option value="标签卷边">标签卷边</a-select-option>
                <a-select-option value="无标签">无标签</a-select-option>
              </a-select>
              <template v-else>
                <a-tag v-if="record.tagStatus === '正常'" color="blue">
                  {{ text }}
                </a-tag>
                <a-tag
                  v-else-if="record.tagStatus === '标签卷边'"
                  color="orange"
                >
                  {{ text }}
                </a-tag>
                <a-tag v-else-if="record.tagStatus === '无标签'" color="red">
                  {{ text }}
                </a-tag>
                <a-tag v-else color="default">{{ text }}}</a-tag>
              </template>
            </div>
          </template>
          <template v-if="['inventoryStatus'].includes(column?.dataIndex)">
            <div>
              <a-select
                v-if="editableData[record.assetId]"
                v-model:value="editableData[record.assetId][column?.dataIndex]"
                style="margin: -5px 0; width: 100px"
              >
                <a-select-option value="0">未盘</a-select-option>
                <a-select-option value="1">新增</a-select-option>
                <a-select-option value="2">已盘</a-select-option>
                <a-select-option value="3">重复已盘</a-select-option>
              </a-select>
              <template v-else>
                <a-tag v-if="record.inventoryStatus === '0'" color="red">
                  未盘
                </a-tag>
                <a-tag v-else-if="record.inventoryStatus === '1'" color="green">
                  新增
                </a-tag>
                <a-tag v-else-if="record.inventoryStatus === '2'" color="blue">
                  已盘
                </a-tag>
                <a-tag
                  v-else-if="record.inventoryStatus === '3'"
                  color="orange"
                >
                  已盘
                </a-tag>
                <a-tag v-else color="default">未知</a-tag>
              </template>
            </div>
          </template>
          <template v-if="column?.dataIndex === 'syncStatus'">
            <a-tag v-if="record.syncStatus === '1'" color="blue">
              已同步
            </a-tag>
            <a-tag v-else-if="record.syncStatus === '0'" color="red">
              未同步
            </a-tag>
            <a-tag v-else color="default">未知码：{{ text }}}</a-tag>
          </template>
          <template v-if="column?.key === 'operation'">
            <div>
              <!--              <a-space>-->
              <span v-if="editableData[record.assetId]">
                <a-button
                  class="button-interval"
                  type="link"
                  size="small"
                  :icon="h(SaveOutlined)"
                  @click="handleSave(record.assetId)"
                >
                  保存
                </a-button>
                <a-button
                  class="button-interval"
                  type="link"
                  size="small"
                  :icon="h(StopOutlined)"
                  @click="handleCancel(record.assetId)"
                >
                  取消
                </a-button>
              </span>
              <span v-else>
                <a-button
                  class="button-interval"
                  type="link"
                  size="small"
                  :icon="h(BarsOutlined)"
                  @click="handleDetail(record)"
                >
                  详情
                </a-button>
                <a-button
                  class="button-interval"
                  type="link"
                  size="small"
                  :icon="h(EditOutlined)"
                  @click="handleEdit(record)"
                >
                  修改
                </a-button>
                <a-button
                  class="button-interval"
                  type="link"
                  size="small"
                  :icon="h(PullRequestOutlined)"
                  @click="handleSync(record)"
                >
                  同步
                </a-button>
              </span>
              <!--              </a-space>-->
            </div>
          </template>
        </template>
      </a-table>
    </div>
    <AssetInventoryDetail
      :open="openDetail"
      @close="closeLifecycle"
      :key="refreshKey"
      :asset="targetAsset"
    />
  </div>
</template>
<style scoped>
.statistic-wrap {
  display: flex;
  width: 100%;
  height: 110px;
  gap: 20px;
  border-radius: 4px;
  margin-bottom: 14px;
}

.statistic-item {
  //background-color: #0a00c2;
  flex: 1;
  border-radius: 8px;
  padding: 20px;

  &-total {
    //background: linear-gradient(to right, #fff5ff, #ffe9ff);
    background-image: url('../../assets/系统数量@2x.png');
    background-size: cover;
    background-position: center;
  }

  &-counted {
    //background: linear-gradient(to right, #fff5ff, #ffe9ff);
    background-image: url('../../assets/实盘数量@2x.png');
    background-size: cover;
    background-position: center;
  }

  &-uncounted {
    //background: linear-gradient(to right, #fff5ff, #ffe9ff);
    background-image: url('../../assets/未盘数量@2x.png');
    background-size: cover;
    background-position: center;
  }

  &-added {
    //background: linear-gradient(to right, #fff5ff, #ffe9ff);
    background-image: url('../../assets/遗失数量@2x.png');
    background-size: cover;
    background-position: center;
  }

  &-label {
    color: #777;
  }

  &-number {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 0;
  }
}

.search-extend {
  display: none;
}
</style>
